import React from 'react'
import { Link } from 'react-router-dom'

class HotSelect extends React.Component {
    deleteRow(e) {
        // console.log(e.target.parentNode);
        // 点击后面的差差删除当前行，此处仅删除页面上的数据，并没有删除数据库里的数据
        let oUl = e.target.parentNode.parentNode;
        oUl.removeChild(e.target.parentNode)
    }

    jumpToDetails(e) {
        // 用来改变父组件里的初始化的值
        this.props.changeToVal(e.target.innerHTML)
    }

    shouldComponentUpdate(nextProps,nextState) {
        if(nextProps.Hot == this.props.Hot) {
            return false;
        }else{
            return true;
        }
    }

    render() {
        // console.log(this.props.Hot);
        // 默认数据的渲染
        let lis = '';
        try {
            let arr = [];
            let newArr = [];
            for (let i = 0; i < 7; i++) {
                let j = '';
                j = Math.floor(Math.random() * 10);
                arr.push(j)
            };
            newArr = new Set(arr);
            newArr = Array.from(newArr);
            lis = newArr.map((item, index) => {
                return (
                    <li key={index} className='mxx_select_lis'>
                        <img src={require('../../assets/mxx_images/shizhong.png')} alt="" />
                        <Link to='/search/bestMatch' className='mxx_select_li' onClick={this.jumpToDetails.bind(this)}>{this.props.Hot[item].first}</Link>
                        <img src={require('../../assets/mxx_images/cha.png')} alt="" onClick={this.deleteRow.bind(this)} />
                    </li>
                )
            });
        } catch (error) {

        }
        return (
            <ul>
                {lis}
            </ul>
        )
    }
}

export default HotSelect